<template>
	<view>
		<nav-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">婚车详情</block>
			<!-- <block slot="right"><view class="iconfont icon-xiaoxi2"></view></block> -->
		</nav-custom>
		<view class="cardetail">
			<swiper circular="true" autoplay="true" indicator-dots indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff"
			 class="swiper" v-if="carInfo.imageArray.length > 0">
				<swiper-item v-for="(item, index) in carInfo.imageArray" :key="index">
					<image :src="item" mode="widthFix"></image>
				</swiper-item>
			</swiper>
			<view class="car-tit">
				<template v-if="type == 1">
					<view class="tit-name">
						<view class="tit1">头车</view>
						<view class="tit2">【{{ carInfo.brandName }}】 {{ carInfo.modelName }}</view>
					</view>
				</template>
				<template v-else>
					<view class="tit-name">
						<view class="tit1">头车</view>
						<view class="tit2">【{{ carInfo.mainBrandName }}】 {{ carInfo.mainModelName }} / {{ carInfo.mainNum }}辆</view>
					</view>
					<view class="tit-name">
						<view class="tit1">跟车</view>
						<view class="tit2">【{{ carInfo.normalBrandName }}】 {{ carInfo.normalModelName }} / {{ carInfo.normalNum }}辆</view>
					</view>
				</template>
				<view class="tit-price">
					<text class="new-price">￥{{ carInfo.jieqinPrice }}</text>
					<text class="old-price">市场价:￥{{ carInfo.marketPrice }}</text>
				</view>
				<view class="tit-prompt">*价格根据用车日期等情况会有所浮动,详询客服</view>
			</view>
			<view class="car-select">
				<view class="item">
					<view class="select-title">结亲日期</view>
					<view class="select-div" @click="show = true">{{ optionDate === '' ? '选择日期' : optionDate }}</view>
					<view class="iconfont icon-left"></view>
				</view>
				<view class="item">
					<view class="select-title">用车要求</view>
					<view class="select-div">
						<picker mode="multiSelector" @change="requiredChange" :value="selectRequiredIndex" :range="selectRequired">
							<view class="select-input">{{ selectRequired[0][selectRequiredIndex[0]] }}小时{{ selectRequired[1][selectRequiredIndex[1]] }}公里</view>
						</picker>
					</view>
					<view class="iconfont icon-left"></view>
				</view>
				<view class="item">
					<view class="select-title">婚车数量</view>
					<template v-if="type == 1">
						<view class="select-div">
							{{carNum}}
						</view>
					</template>
					<template v-else>
						<view class="select-div">
							<picker mode="multiSelector" @change="packageChange" :value="selectPackageIndex" :range="selectPackage">
								<view class="select-input">{{ selectPackage[0][selectPackageIndex[0]] }}辆头车+{{ selectPackage[1][selectPackageIndex[1]] }}辆跟车</view>
							</picker>
						</view>
					</template>
					<view class="iconfont icon-left"></view>
				</view>
			</view>
			<view class="car-label">
				<view class="label-tit">图文详情</view>
				<view class="label-list" v-if="type == 1">【{{ carInfo.brandName }}】 {{ carInfo.modelName }}-{{ carInfo.color }}</view>
				<view class="label-list">【费用包括】 司机、邮费、清洗费、保养费(交通违规由司机负责)</view>
				<view class="label-list">【费用不包括】 过路费、过桥费、停车费、装饰费</view>
				<view class="label-list">【其他费用】 超时费、超公里费</view>
				<view class="label-tit2"><text>服务内容</text></view>
				<view class="label-tit3">
					<view>基础时间</view>
					<view>基础里程</view>
				</view>
				<view class="label-tit4">
					<view>6h</view>
					<view>50km</view>
				</view>
			</view>
			<view class="car-img">
				<view class="label-tit">车辆细节展示</view>
				<image v-for="(item, index) in carInfo.imageArray" :key="index" :src="item"></image>
			</view>
			<view class="car-process">
				<view class="process-tit">预定流程</view>
				<view class="process-tit2">让婚车来的更方便</view>
				<view class="process-tit3">
					<view class="item">
						<view class="iconfont icon-8"></view>
						<view class="num">在线咨询</view>
					</view>
					<view class="item">
						<view class="iconfont icon-shuzi2"></view>
						<view class="num">线上下单</view>
					</view>
					<view class="item">
						<view class="iconfont icon-3"></view>
						<view class="num">信息确定</view>
					</view>
					<view class="item">
						<view class="iconfont icon-4"></view>
						<view class="num">预定完成</view>
					</view>
				</view>
			</view>
			<view class="car-process" style="border-top: 16upx solid #f5f5f5;">
				<view class="process-tit">预定须知</view>
				<view class="process-tit2">为婚礼保价护航</view>
				<view class="process-tit4">
					<view class="p-tit">一.标题标题标题标题</view>
					<view class="p-text">1.因结婚吉日婚车资源较为紧张，为避免当天无婚车可用，建议您确定婚期后尽快定车；</view>
					<view class="p-text">2.因结婚吉日婚车资源较为紧张，为避免当天无婚车可用，建议您确定婚期后尽快定车；</view>
					<view class="p-text">3.因结婚吉日婚车资源较为紧张，为避免当天无婚车可用，建议您确定婚期后尽快定车；</view>
					<view class="p-text">4.因结婚吉日婚车资源较为紧张，为避免当天无婚车可用，建议您确定婚期后尽快定车；</view>
					<view class="p-tit">二.标题标题标题标题</view>
					<view class="p-text">1.因结婚吉日婚车资源较为紧张，为避免当天无婚车可用，建议您确定婚期后尽快定车；</view>
					<view class="p-text">2.因结婚吉日婚车资源较为紧张，为避免当天无婚车可用，建议您确定婚期后尽快定车；</view>
					<view class="p-text">3.因结婚吉日婚车资源较为紧张，为避免当天无婚车可用，建议您确定婚期后尽快定车；</view>
					<view class="p-text">4.因结婚吉日婚车资源较为紧张，为避免当天无婚车可用，建议您确定婚期后尽快定车；</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom-icon" @click="onTel">
				<view class="iconfont icon-dianhua"></view>
				<view class="bottom-text">电话</view>
			</view>
			<view class="bottom-icon" @click="toChar()">
				<view class="iconfont icon-xiaoxi2"></view>
				<view class="bottom-text">私信</view>
			</view>
			<view class="bottom-icon" @click="toShopCart">
				<text class="number" v-if="cartList.length !== 0">{{cartList.length}}</text>
				<view class="iconfont icon-gouwuche"></view>
				<view class="bottom-text">购物车</view>
			</view>
			<view class="bottom-btn shopcart" @click="addShopingCart">加入购物车</view>
			<view class="bottom-btn message" @click="toChar(1)">查询档期</view>
		</view>
		<view v-if="show" class="calendar-mask" @click="show = false">
			<view class="calendar-box" @click.stop="">
				<uni-calendar :date="current_time" :disable-before="true" @to-click="toClick" />
			</view>
		</view>
		<u-loading :visible="loading"></u-loading>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';

	export default {
		components: {
			uniCalendar
		},
		data() {
			return {
				loading: true, //加载中
				carInfo: null,
				selectRequiredIndex: [0, 0],
				selectRequired: [
					[6, 7, 8, 9, 10, 11, 12, 13],
					[50, 60, 70, 80, 90, 100]
				],
				selectPackageIndex: [0, 0],
				selectPackage: [
					[1],
					[2, 3, 4, 5, 6, 7, 8, 9, 10]
				],
				show: false, //时间控件
				current_time: this.getData(),
				optionDate: '', //选择时间
				carNum: 1, //婚车数量
				type: null,
				cartList: []
			};
		},
		onLoad(option) {
			option.type == 1 ? this.getCarInfo(option.id) : this.getCarPackageInfo(option.id);
			this.type = option.type;
			if(this.hasLogin){
				this.getShopingCartList();
			}
		},
		onReady() {},
		computed:{
			...mapState(['hasLogin'])
		},
		methods: {
			/**
			 * 获取购物车列表
			 */
			getShopingCartList() {
				this.$api.ShopingCartList().then(res => {
					this.cartList = res.data;
				});
			},
			/**
			 * 获取今天日期
			 */
			getData() {
				let dd = new Date()
				let y = dd.getFullYear()
				let m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
				let d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
				return y + '-' + m + '-' + d
			},
			/**
			 * 获取婚车详情
			 */
			getCarInfo(id) {
				this.$api.CarInfo(id).then(res => {
					this.carInfo = res.data;
					this.$nextTick(function() {
						setTimeout(() => {
							this.loading = false;
						}, 500)
						this.getAddPriceRule(res.data.brandId, res.data.modelId);
					})
				});
			},
			/**
			 * 获取婚车套餐详情
			 */
			getCarPackageInfo(id) {
				this.$api.CarPackageInfo(id).then(res => {
					this.carInfo = res.data;
					this.$nextTick(function() {
						setTimeout(() => {
							this.loading = false;
						}, 500)
						this.getAddPriceRule(res.data.mainBrandId, res.data.mainModelId);
					})
				});
			},
			/**
			 * 获取加价规则
			 */
			getAddPriceRule(brandId, modelId) {
				let data = {
					cityId: this.$store.state.cityId,
					brandId: brandId,
					modelId: modelId,
				};
				this.$api.AddPriceRule(data).then(res => {
					console.log(res)
				});
			},
			/**
			 * 选择公里小时
			 */
			requiredChange(e) {
				this.selectRequiredIndex = e.detail.value;
			},
			/**
			 * 选择婚车套餐数量
			 */
			packageChange(e) {
				this.selectPackageIndex = e.detail.value;
			},
			/**
			 * 选择日历
			 */
			toClick(e) {
				this.optionDate = e.fulldate;
				this.show = false;
			},
			//拨打电话
			onTel() {
				uni.makePhoneCall({
					phoneNumber: '17600200576'
				});
			},
			/**
			 * 去购物车
			 */
			toShopCart() {
				if (!this.hasLogin) {
					uni.showModal({
						content: "您还没有登录，是否现在登录",
						confirmText: "确定",
						cancelText: "取消",
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '../login/login'
								});
							}
						}
					})
				} else {
					uni.navigateTo({
						url: '../shopcart/cart'
					});
				}
			},
			/**
			 * 去聊天页面
			 */
			toChar(info) {
				if (!this.hasLogin) {
					uni.showModal({
						content: "您还没有登录，是否现在登录",
						confirmText: "确定",
						cancelText: "取消",
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '../login/login'
								});
							}
						}
					})
				} else {
					if(info){
						uni.navigateTo({
							url: `../index/chat?id=1`
						});
					}else{
						uni.navigateTo({
							url: '../index/chat'
						});
					}

				}
			},
			/**
			 * 加入购物车
			 */
			addShopingCart() {
				if (!this.hasLogin) {
					uni.showModal({
						content: "您还没有登录，是否现在登录",
						confirmText: "确定",
						cancelText: "取消",
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '../login/login'
								});
							}
						}
					})
				} else {
					if (!this.optionDate) {
						uni.showToast({
							icon: 'none',
							title: '请选择结亲日期'
						});
						return
					}
					let Param = {
						carNum: this.type == 1 ? 1 : this.selectPackage[0][this.selectPackageIndex[0]] + '_' + this.selectPackage[1][
							this.selectPackageIndex[
								1]
						],
						earnestPrice: this.carInfo.depositPrice,
						jieqinPrice: this.carInfo.jieqinPrice,
						selectRequired: this.selectRequired[0][this.selectRequiredIndex[0]] + '_' + this.selectRequired[1][this.selectRequiredIndex[
							1]],
						targetTime: this.optionDate,
						// isMainCar: '0',
						targetId: this.carInfo.id,
						typeId: this.type
					}
					this.loading = true;
					this.$api.AddShopingCart(Param).then(res => {
						setTimeout(() => {
							this.loading = false;
							uni.showToast({
								icon: 'none',
								title: res.msg
							});
						}, 500)
						this.getShopingCartList();
					})
				}
			}
		}
	};
</script>

<style lang="scss">
	.cardetail {
		padding-bottom: 100upx;
		background-color: #fff;

		.swiper {
			width: 100%;
			height: 420upx;

			image {
				width: 100%;
				height: 420upx;
			}
		}

		.car-tit {
			padding: 20upx 30upx;
			border-bottom: 16upx solid #f5f5f5;

			.tit-name {
				height: 80upx;
				display: flex;
				align-items: center;

				.tit1 {
					font-size: 32upx;
					color: #949494;
					flex: 0 0 100upx;
				}

				.tit2 {
					font-size: 34upx;
					color: #000;
					flex: auto;
					font-weight: 700;
				}
			}

			.tit-price {
				height: 80upx;
				display: flex;
				align-items: center;

				.new-price {
					font-size: 40upx;
					font-weight: 700;
					color: var(--pink);
					padding-right: 20upx;
				}

				.old-price {
					font-size: 28upx;
					color: #8c8c8c;
					text-decoration: line-through;
				}
			}

			.tit-prompt {
				font-size: 28upx;
				color: #8c8c8c;
			}
		}

		.car-select {
			padding: 0 30upx;

			.item {
				height: 100upx;
				display: flex;
				align-items: center;
				border-bottom: 2upx solid #e7e7e7;

				.select-title {
					flex: 0 0 200upx;
					font-size: 32upx;
					color: #333;
				}

				.select-div {
					flex: auto;
				}

				.iconfont {
					font-size: 24upx;
					color: #ddd;
				}
			}
		}

		.car-label {
			padding: 20upx 30upx 30upx;
			border-bottom: 16upx solid #f5f5f5;

			.label-tit {
				font-size: 32upx;
				font-weight: 700;
				color: #000;
				line-height: 80upx;
			}

			.label-list {
				color: #333;
				font-size: 32upx;
				line-height: 50upx;
			}

			.label-tit2 {
				position: relative;
				height: 40upx;
				text-align: center;
				line-height: 40upx;
				margin: 40upx 0;

				&::after {
					content: '';
					height: 2upx;
					width: 690upx;
					background-color: #666;
					left: 0;
					top: 19upx;
					position: absolute;
				}

				text {
					font-size: 32upx;
					font-weight: bold;
					color: var(--pink);
					background-color: #fff;
					position: relative;
					z-index: 2;
					padding: 0 20upx;
				}
			}

			.label-tit3 {
				display: flex;
				background-color: #f3f3f3;

				view {
					height: 54upx;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 2upx solid #c7c7c7;
					flex: 1;
					font-size: 26upx;
					color: #222;

					&:first-child {
						border-right: none;
					}
				}
			}

			.label-tit4 {
				display: flex;

				view {
					height: 76upx;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 2upx solid #c7c7c7;
					flex: 1;
					font-size: 26upx;
					color: #444;
					border-top: none;

					&:first-child {
						border-right: none;
					}
				}
			}
		}

		.car-img {
			.label-tit {
				font-size: 32upx;
				font-weight: 700;
				color: #000;
				line-height: 80upx;
				padding: 20upx 30upx 0;
			}

			image {
				width: 100%;
				float: left;
			}
		}

		.car-process {
			clear: both;
			padding: 40upx 30upx 10upx;

			.process-tit {
				font-size: 70upx;
				color: #323232;
				font-weight: 900;
				text-align: center;
			}

			.process-tit2 {
				font-size: 46upx;
				color: #6e6e6e;
				font-weight: 100;
				text-align: center;
			}

			.process-tit3 {
				display: flex;
				padding: 40upx 0;

				.item {
					flex: 1;
					text-align: center;

					.iconfont {
						font-size: 60upx;
						padding-bottom: 10upx;

						&.icon-8 {
							color: var(--yellow);
						}

						&.icon-shuzi2 {
							color: var(--olive);
						}

						&.icon-3 {
							color: var(--green);
						}

						&.icon-4 {
							color: var(--cyan);
						}
					}

					.num {
						font-size: 28upx;
						color: #333;
					}
				}
			}

			.process-tit4 {
				padding: 30upx 0;

				.p-tit {
					padding: 10upx 0 10upx 20upx;
					line-height: 1;
					font-size: 32upx;
					font-weight: 600;
					color: #333;
					position: relative;

					&::before {
						content: '';
						width: 4upx;
						height: 30upx;
						background-color: var(--pink);
						position: absolute;
						left: 0;
						top: 10upx;
					}
				}

				.p-text {
					line-height: 44upx;
					font-size: 26upx;
					color: #999;
				}
			}
		}
	}

	.bottom {
		position: fixed;
		width: 100%;
		height: 100upx;
		display: flex;
		bottom: 0;
		z-index: 2;

		.bottom-icon {
			flex: 0 0 100upx;
			background-color: #fff;
			text-align: center;
			position: relative;
			border-top: 2upx solid #eaeaea;
			.number{
				font-size: 20upx;
				color: var(--pink);
				position: absolute;
				top: 4upx;
				right: 12upx;
				line-height: 24upx;
				border-radius: 16upx;
				padding: 0 6upx;
				background-color: #fff;
				font-weight: 500;
			}
			.iconfont {
				font-size: 50upx;
				font-weight: bold;
				color: var(--pink);
				height: 60upx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.bottom-text {
				font-size: 24upx;
				color: #000;
				line-height: 36upx;
			}
		}

		.bottom-btn {
			flex: auto;
			line-height: 100upx;
			text-align: center;
			font-size: 28upx;
			font-weight: 700;

			&.shopcart {
				color: #fff;
				background-color: var(--pink);
			}

			&.message {
				border-top: 2upx solid #eaeaea;
				color: var(--pink);
				background-color: #fff;
			}
		}
	}

	.calendar-mask {
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.5);

		.calendar-box {
			bottom: 0;
			width: 100%;
			position: absolute;
		}
	}
</style>
